<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        span {
            display: block;
            background-color: red;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            position: absolute;
            left:0px;
            top:0px
        }
    </style>
</head>
<body>
<div id="box">
    <span></span>
    <span></span>
</div>

<script>
    var box = document.getElementById('box');


    var x = 0;
    function f(){
        var ball = document.createElement('span');

        x  = x+5;
        console.log(x);
        var y = Math.tan(x*0.017453293)*50+100;
        ball.style.left = x +'px'
        ball.style.top = y +'px'
        box.appendChild(ball)
    }
    setInterval(f,100);
</script>
</body>
</html>